<template>
	<div class="system-log-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-form-item label-width="100px" label="模块">
					<el-input v-model="formInline.ModuleName" placeholder="请选择..."></el-input>
				</el-form-item>
				<!-- <el-form-item label-width="100px" label="操作内容">
					<el-input v-model="formInline.Content" placeholder="请输入..."></el-input>
				</el-form-item> -->
				<el-form-item label-width="100px" label="操作人">
					<el-input v-model="formInline.User" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="100px" label="操作时间">
					<el-date-picker
						v-model="formInline.OperateTime"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item style="margin-left: 20px">
					<el-button  type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
					<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
					<el-button type="success" plain @click="onExport" icon="el-icon-document" size="small">导出</el-button>
				</el-form-item>
			</el-form>
			<el-table
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '38px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 100%"
			>
				<el-table-column align="center" label="序号" width="180"> 
					<template #default="scope">{{ scope.row.id }}</template>
				</el-table-column>
				<el-table-column align="center" property="module" sortable prop="module" label="模块" show-overflow-tooltip />
				<el-table-column align="center" property="action" sortable prop="action" label="小模块" show-overflow-tooltip />
				<el-table-column align="center" property="creator" sortable label="操作人" show-overflow-tooltip />
				<el-table-column align="center" sortable label="操作时间" show-overflow-tooltip >
						<template #default="scope">{{ `${dateFormat(scope.row.createTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" label="请求内容">
					<template #default="scope">
						<el-button type="primary" @click="onSenderInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
				<el-table-column align="center" label="响应内容">
					<template #default="scope">
						<el-button type="primary" @click="onReceivedInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 400]"
				:page-size="pager.pageSize"
				layout="prev, pager, next, jumper,total,sizes"
				:total=pager.total
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
		<Val ref="valRef" />
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive } from 'vue';
import Val from './component/val.vue';
import { dateFormat } from '/@/common/index';
import{queryPagerLogs} from '../../../api/common/index'

export default {
	name: 'systemLog',
	components: { Val },
	setup() {
		const valRef = ref();
		const state = reactive({
			formInline: {
				ModuleName: '',
				Content: '',
				User:'',
				OperateTime:[]
			},
			tableData: []
		});
		const pager = reactive({
			pageSize: 15,
			total: 0,
			page: 1,
		});
		const onSenderInfo = (row: any) => {
			valRef.value.openDialog(row.requestBody, '请求内容');
		};
		const onReceivedInfo = (row: any) => {
			valRef.value.openDialog(row.responseBody, '响应内容');
		};
		function onHandleSizeChange(pageSize: number) {
			pager.pageSize = pageSize;
			initLogs();
		}
		function onHandleCurrentChange(pageIndex: any) {
			pager.page = pageIndex;
			initLogs();
		}
		(async function () {
			await initLogs();
		})();
		async function initLogs() {
			const {ModuleName,Content,User,OperateTime}=state.formInline;
			const params={
				ModuleName:ModuleName,
				Content:Content,
				User:User,
				StartDate:OperateTime.length>0?OperateTime[0]:null,
				EndDate:OperateTime.length>0?OperateTime[1]:null,
				Page:pager.page,
				PageSize:pager.pageSize
			};
			await queryPagerLogs(params).then((res: any) => {
				if (res.success) {
					state.tableData = [];
					state.tableData = res.data.data;
					pager.total = res.data.totalCount;
				}
			});
		}
		function onSearch() {
			initLogs();
		}
		function onRest(){
			state.formInline.Content='';
			state.formInline.ModuleName='';
			state.formInline.User='';
			state.formInline.OperateTime=[];
		}
		function onExport(){
		}
		return {
			valRef,
			onSenderInfo,
			onHandleSizeChange,
			onHandleCurrentChange,
			onReceivedInfo,
			onSearch,
			onRest,
			onExport,
			pager,
			dateFormat,
			...toRefs(state),
		};
	},
};
</script>
